<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { FormProps } from "../utils/types";
import { formRules } from "../utils/rule";
import type { UploadProps } from "element-plus";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    Id: 0,
    TenantId: 0,
    DealerId: 0,
    Model: "",
    Type: "",
    Runtime: "",
    AppType: "",
    AppVer: "",
    PVer: 0,
    HasCam: 0,
    HasScreen: 0,
    HasUI: 0,
    HasGps: 0,
    HasGyro: 0,
    HasSim: 0,
    P2PAuto: 0,
    Tts: 0,
    ImageUrl: "",
    DlUrl: "",
    Comment: ""
  }),
  title: ""
});
const newFormInline = ref(props.formInline);

// 功能特性选项
const featureOptions = [
  { label: "摄像头", value: "摄像头", field: "HasCam" },
  { label: "屏幕", value: "屏幕", field: "HasScreen" },
  { label: "UI", value: "UI", field: "HasUI" },
  { label: "GPS", value: "GPS", field: "HasGps" },
  { label: "陀螺仪", value: "陀螺仪", field: "HasGyro" },
  { label: "SIM", value: "SIM", field: "HasSim" },
  { label: "个呼", value: "个呼", field: "P2PAuto" },
  { label: "TTS", value: "TTS", field: "Tts" }
];
const imageUrl = ref("");
const downloadUrl = ref("");
const handleImageUploadSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  // 将上传成功返回的FileKey赋值给logo字段
  newFormInline.value.ImageUrl = response.Data.FileKey;
  console.log("FileKey:", newFormInline.value.ImageUrl);
};
const beforeImageUploadSuccess: UploadProps["beforeUpload"] = rawFile => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("Logo图片必须是JPG或PNG格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Logo图片大小不能超过2MB!");
    return false;
  }
  return true;
};
const handleAppUploadSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  downloadUrl.value = URL.createObjectURL(uploadFile.raw!);
  // 将上传成功返回的FileKey赋值给logo字段
  newFormInline.value.DlUrl = response.Data.FileKey;
  console.log("FileKey:", newFormInline.value.DlUrl);
};
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="型号" prop="Model">
      <el-input v-model="newFormInline.Model" placeholder="请输入终端型号" />
    </el-form-item>
    <el-form-item label="类型" prop="Type">
      <el-select v-model="newFormInline.Type" placeholder="请选择类型">
        <el-option label="手台" value="0" />
        <el-option label="呼救器" value="1" />
        <el-option label="广播机" value="2" />
        <el-option label="移动式调度机" value="3" />
        <el-option label="执法仪" value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="运行时环境" prop="Runtime">
      <el-input v-model="newFormInline.Runtime" placeholder="请输入运行环境" />
    </el-form-item>
    <el-form-item label="程序类型" prop="AppType">
      <el-input v-model="newFormInline.AppType" placeholder="请输入程序类型" />
    </el-form-item>
    <el-form-item label="固件版本" prop="AppVer">
      <el-input v-model="newFormInline.AppVer" placeholder="请输入固件版本" />
    </el-form-item>
    <el-form-item label="协议版本" prop="PVer">
      <el-input
        v-model="newFormInline.PVer"
        placeholder="请输入协议版本"
        type="number"
      />
    </el-form-item>
    <el-form-item label="功能特性" prop="Features">
      <el-checkbox
        v-for="option in featureOptions"
        :key="option.field"
        v-model="newFormInline[option.field]"
        :label="option.label"
        :value="option.value"
        :true-value="1"
        :false-value="0"
      >
        {{ option.label }}
      </el-checkbox>
    </el-form-item>
    <el-form-item label="图像上传" prop="imageUrl">
      <el-upload
        v-if="props.title === '创建'"
        method="post"
        action="/api/File/upload"
        :on-success="handleImageUploadSuccess"
        :before-upload="beforeImageUploadSuccess"
        :show-file-list="true"
        :file-list="
          imageUrl ? [{ name: imageUrl.split('/').pop(), url: imageUrl }] : []
        "
      >
        <el-button type="primary">点击上传图像</el-button>
      </el-upload>
      <el-input
        v-else
        v-model="newFormInline.ImageUrl"
        placeholder="图像URL"
        disabled
      />
    </el-form-item>
    <el-form-item label="APP上传" prop="DownloadUrl">
      <el-upload
        v-if="props.title === '创建'"
        method="post"
        action="/api/File/upload"
        :on-success="handleAppUploadSuccess"
        :show-file-list="true"
        :file-list="
          newFormInline.DlUrl
            ? [
                {
                  name: newFormInline.DlUrl.split('/').pop(),
                  url: newFormInline.DlUrl
                }
              ]
            : []
        "
      >
        <el-button type="primary">点击上传APP</el-button>
      </el-upload>
      <el-input
        v-else
        v-model="newFormInline.DlUrl"
        placeholder="下载URL"
        disabled
      />
    </el-form-item>
    <el-form-item label="备注" prop="Comment">
      <el-input
        v-model="newFormInline.Comment"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入备注，最多200字"
      />
    </el-form-item>
  </el-form>
</template>
